<template>
  <div>
    <el-calendar v-model="state.value" ref="Calendar">
      <template #header="{ date }">
        <span>即爱日历</span>
        <span>{{ date }}</span>
        <el-button-group>
          <el-button size="small" @click="selectDate('prev-month', date)">
            上个月
          </el-button>
          <el-button size="small" @click="selectDate('today', date)"
            >今天</el-button
          >
          <el-button size="small" @click="selectDate('next-month', date)">
            下个月
          </el-button>
        </el-button-group>
      </template>
      <template #dateCell="{ data }">
        <div
          class="el-calendar-day"
          @click="viewDayWork(data)"
          :property="popoverRef"
          ref="buttonRef"
        >
          <div class="el-calendar-day_date-cell date-class">
            <div>
              <span>{{ data.day.split('-').slice(1).join(' - ') }}</span>
            </div>
            <el-divider></el-divider>
            <div :class="comAction.isFestival(data) ? 'festival-holiday' : ''">
              <span v-html="comAction.solarToLunar(data)"></span>
              <div
                style="width: 100%"
                v-for="item in commemorationData.data"
                :key="item.time"
              >
                <el-tag type="danger" v-if="item.time.indexOf(data.day) != -1">
                  {{ item.content }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </template>
    </el-calendar>
  </div>
  <div class="demandFormVisible_dialog">
    <el-dialog
      draggable
      v-model="visible"
      destroy-on-close
      @close="clear"
      :modal="false"
      :close-on-click-modal="false"
      :title="'即爱日历 &nbsp;' + showVos.dateTime"
      width="30%"
      :modal-append-to-body="true"
    >
      <div style="margin-left: 20px; margin-bottom: 20px">
        <el-button type="primary" @click="setCommemorationDay"
          >设置为纪念日</el-button
        >
      </div>
      <div>
        <el-card
          v-if="new Date(showVos.dateTime).getTime() <= new Date().getTime()"
        >
          <p>已完成：</p>
          <p>&nbsp;&nbsp;工作：{{ showCalendarVOs.finish?.workCard }}</p>
          <p>&nbsp;&nbsp;生活：{{ showCalendarVOs.finish?.lifeCard }}</p>
          <p>&nbsp;&nbsp;学习：{{ showCalendarVOs.finish?.learnCard }}</p>
        </el-card>
        <el-card
          v-if="new Date(showVos.dateTime).getTime() < new Date().getTime()"
        >
          <p>未完成：</p>
          <p>&nbsp;&nbsp;工作：{{ showCalendarVOs.unFinish?.workCard }}</p>
          <p>&nbsp;&nbsp;生活：{{ showCalendarVOs.unFinish?.lifeCard }}</p>
          <p>&nbsp;&nbsp;学习：{{ showCalendarVOs.unFinish?.learnCard }}</p>
        </el-card>
        <el-card
          v-if="new Date(showVos.dateTime).getTime() >= new Date().getTime()"
        >
          <p>待完成：</p>
          <p>&nbsp;&nbsp;工作：{{ showCalendarVOs.unFinish?.workCard }}</p>
          <p>&nbsp;&nbsp;生活：{{ showCalendarVOs.unFinish?.lifeCard }}</p>
          <p>&nbsp;&nbsp;学习：{{ showCalendarVOs.unFinish?.learnCard }}</p>
        </el-card>
      </div>
    </el-dialog>
  </div>
  <CommemorationDay
    ref="commemorationRef"
    @CommemorationDayConfig="CommemorationDayConfig"
    :commemorationVisible="commemorationVisible"
  ></CommemorationDay>
</template>
<script setup lang="ts">
// @ts-nocheck
import calendar from './lunarDay.js'
import { reactive, onMounted, onUnmounted, nextTick } from 'vue'
import { ref } from 'vue'
import { queryCalendar, getCommemorationDay } from '@/api/calendar'
import CommemorationDay from './commemorationDay.vue'
import type { CalendarDateType } from 'element-plus'

let commemorationData = reactive({
  data: [
    {
      time: '',
      content: '',
    },
  ],
})

// 初始化查询
onMounted(() => {
  getCommemorationDay('', 'today').then(async (res: any) => {
    if (res.data) {
      commemorationData.data = res.data
    }
  })
})

const Calendar = ref()

const selectDate = (val: CalendarDateType, data: any) => {
  if (!Calendar.value) {
    return
  }
  Calendar.value.selectDate(val)

  getCommemorationDay(data, val.toString()).then(async (res: any) => {
    if (res.data) {
      commemorationData.data = res.data
    }
  })
}

const buttonRef = ref()
const popoverRef = ref()
const visible = ref<Boolean>(false)
const commemorationVisible = ref<Boolean>(false)
const commemorationRef = ref()

let showCalendarVOs: any = reactive({
  finish: {
    workCard: '',
    lifeCard: '',
    learnCard: '',
  },
  unFinish: {
    workCard: '',
    lifeCard: '',
    learnCard: '',
  },
})

let showVos: any = reactive({
  dateTime: '',
})

const state = reactive({
  value: new Date(),
})

const CommemorationDayConfig = (data: any) => {
  commemorationVisible.value = data
}

const clear = () => {
  visible.value = false
  resetFields()
}

const resetFields = () => {
  showCalendarVOs.finish.workCard = ''
  showCalendarVOs.finish.lifeCard = ''
  showCalendarVOs.finish.learnCard = ''
  showCalendarVOs.unFinish.workCard = ''
  showCalendarVOs.unFinish.lifeCard = ''
  showCalendarVOs.unFinish.learnCard = ''
}

const viewDayWork = (data: any) => {
  visible.value = true
  showVos.dateTime = data.day
  // 调用请求计划内容
  queryCalendar(data.day).then((res: any) => {
    if (res.data) {
      showCalendarVOs.finish.workCard = res.data.finish?.workCard
      showCalendarVOs.finish.lifeCard = res.data.finish?.lifeCard
      showCalendarVOs.finish.learnCard = res.data.finish?.learnCard
      showCalendarVOs.unFinish.workCard = res.data.unFinish?.workCard
      showCalendarVOs.unFinish.lifeCard = res.data.unFinish?.lifeCard
      showCalendarVOs.unFinish.learnCard = res.data.unFinish?.learnCard
    }
  })
}

const setCommemorationDay = () => {
  commemorationVisible.value = true
  commemorationRef.value?.initsObj(showVos.dateTime)
}

const comAction = {
  // 是否节假日
  isFestival(slotData: any) {
    // console.log(slotData);
    let solarDayArr = slotData.day.split('-')
    let lunarDay: any = calendar.solar2lunar(
      solarDayArr[0],
      solarDayArr[1],
      solarDayArr[2]
    )

    // 公历节日\农历节日\农历节气
    let festAndTerm: any = []
    festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
    festAndTerm.push(
      lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival
    )
    festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
    festAndTerm = festAndTerm.join('')

    return festAndTerm != ''
  },
  // 公历转农历
  solarToLunar(slotData: any) {
    // console.log(slotData);
    let solarDayArr = slotData.day.split('-')
    let lunarDay: any = calendar.solar2lunar(
      solarDayArr[0],
      solarDayArr[1],
      solarDayArr[2]
    )

    // 农历日期
    let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn

    // 公历节日\农历节日\农历节气
    let festAndTerm = ''
    festAndTerm += lunarDay.festival == null ? '' : lunarDay.festival + '<br />'
    festAndTerm +=
      lunarDay.lunarFestival == null ? '' : lunarDay.lunarFestival + '<br />'
    festAndTerm += lunarDay.Term == null ? '' : lunarDay.Term + '<br />'
    return festAndTerm == '' ? lunarMD : festAndTerm
  },
}
onMounted(() => {})
onUnmounted(() => {})
</script>
<style scoped lang="scss">
::v-deep(.el-calendar) {
  .el-calendar__header {
    padding: 2px !important;
  }

  .el-calendar__body {
    padding: auto !important;
  }
}

.date-class {
  font-size: 12px;
  text-align: center;
  margin-top: 1px;
  font-family: DS-DIGI-1;
}

::v-deep(.el-calendar-table .el-calendar-day) {
  padding: 2px;
}

.festival-holiday {
  color: #b51313;
}

::v-deep(.el-calendar-table) {
  text-align: center;

  .el-divider {
    margin: 3px 0;
    border-top: 1px#3763c9 var(--el-border-style);
  }
}

.demandFormVisible_dialog .el-dialog__wrapper {
  pointer-events: none;
}

.demandFormVisible_dialog .el-dialog {
  pointer-events: auto;
}
</style>
